<template>
    <div class="flex-grow" ref="contentResize">
        <div v-show="contentShow">
            <slot v-bind:content="content"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "ContentResize",
    data() {
        return {
            contentShow: true,
            content: {
                width: 0,
                height: 0,
            },
            resizeObserver: null,
        }
    },
    mounted() {
        // 防抖拦截
        let debounce = _.debounce(entries => {
            // 显示模块
            this.contentShow = true;
            // 计算宽高
            for (let entry of entries) {
                if (entry.borderBoxSize && entry.borderBoxSize.length) {
                    this.content.width = Math.floor(entry.borderBoxSize[0].inlineSize);
                    this.content.height = Math.floor(entry.borderBoxSize[0].blockSize);
                } else if (entry.contentBoxSize && entry.contentBoxSize.length) {
                    this.content.width = Math.floor(entry.contentBoxSize[0].inlineSize);
                    this.content.height = Math.floor(entry.contentBoxSize[0].blockSize);
                } else {
                    this.content.width = Math.floor(entry.contentRect.width);
                    this.content.height = Math.floor(entry.contentRect.height);
                }
            }
        }, 100);

        // 初始化监听器和回调函数
        this.resizeObserver = new ResizeObserver(entries => {
            // 隐藏模块
            this.contentShow = false;
            // 防抖拦截
            debounce(entries);
        });
        // 添加容器改变监听
        this.resizeObserver.observe(this.$refs.contentResize, {box: 'border-box'});
    },
    beforeDestroy() {
        // 移除容器改变监听
        this.resizeObserver.disconnect();
    },
}
</script>

<style scoped>

</style>
